import { View } from '@tarojs/components';
import { useLoad } from '@tarojs/taro';
import { CustomTheme } from '@/context/ThemeContext';
import ScrollBetweenMenu from '@/components/menus/ScrollBetweenMenu';
import notification from '@/assets/images/icon/notification.png';
import message from '@/assets/images/icon/message.png';
import { Image } from '@taroify/core';
import { useState } from 'react';
import Chat from '@/components/message/Chat';
import Notification from '@/components/message/Notification';

function Message() {
  useLoad(() => {
    console.log('Page loaded.');
  });
  const [menu, setMenu] = useState(0);
  const [index, setIndex] = useState(1);
  function getClassName(i: number) {
    return `
      ${index == i ? 'bg-transparent' : 'bg-[#F5F0F6]'} 
      ${index == i - 1 ? 'rounded-tr-xl' : ''} 
      ${index == i + 1 ? 'rounded-br-xl' : ''}
      ${index != 0 && index == i - 1 ? 'rounded-r-xl' : ''}
      `;
  }

  return (
    <View className="">
      <ScrollBetweenMenu
        titleWidth="70px"
        height="100vh"
        mianBg="#F5F0F6"
        bg="#F5F0F6"
      >
        <View className="bg-white mt-12">
          <View className={getClassName(0)} onClick={() => setIndex(0)}>
            <Image src={notification} className="w-12 h-12" />
          </View>
          <View
            className={`rounded-l-xl ${getClassName(1)}`}
            onClick={() => setIndex(1)}
          >
            <Image src={message} className="w-12 h-12" />
          </View>
        </View>
        <View
          className={`bg-white ${
            index != 0 ? 'rounded-tl-xl' : ''
          } h-screen  mt-12`}
        >
          {index == 0 && <Notification />}
          {index == 1 && <Chat />}
          {index > 1 && <View></View>}
        </View>
      </ScrollBetweenMenu>
    </View>
  );
}
export default () => (
  <CustomTheme>
    <Message />
  </CustomTheme>
);
